"use straic";

(function (e) {
  var r = function () {},
    l = function () {
      this.option = {
        type: "", //竖线类型
        name: "body", //父级元素 标签name值
        loadingText: "loading", //加载文字
        loadingFontsize: 12, //加载文字大小
        loadingColor: "#000000", //loading 字体颜色
        loadingTop: 10, //loading 字体margin-top
        wWidth: 100, //wrap宽度
        wHeight: 100, //wrap宽度
        wBackgroundColor: "#ffffff", //wrap背景色
        wRadius: 4, //wrap圆角
        wOpacity: 1, //wrap透明度
        wBackgroundImg: "", //wrap背景图片
        width: 10, //loading状态条的宽度
        height: 2, //loading状态条的高度
        backgroundColor: "#000000", //loading状态条背景色
        radius: 2, //loading状态条圆角
        backBackgroundColor: "#000000", //back背景色
        backBackgroundImg: "", //back背景图片
        top: 10, //margin-top
        dispersed: 0, //离散值
        backOpacity: 0.4, //back透明度
      };
      this._op = {
        index: 0,
      };
    };
  //初始化
  r.prototype.init = l;
  //打开
  l.prototype.open = function (option) {
    this._opt = Object.assign({}, this.option, option);
    console.log(this._opt)
    this._loading = document.createElement("div"); //创建元素
    this._classattr = document.createAttribute("class"); //创建属性
    this._classattr.value =
    this._opt.name == "body"
        ? "lanui-loading lanui-loading-fixed" +
          " lanui-loading-" +
          ++this._op.index
        : "lanui-loading" + " lanui-loading-" + ++this._op.index; //创建属性名
        this._loading.setAttributeNode(this._classattr); //添加属性
    if (this._opt.type == "VL") {
        this._loading.innerHTML =
        "<div class='lanui-loading-back' style='background-color:" +
        this._opt.backBackgroundColor +
        ";opacity:" +
        this._opt.backOpacity +
        ";background-image:url(" +
        this._opt.backBackgroundImg +
        ")'></div>" +
        "<div class='lanui-loading-main' style='width:" +
        this._opt.wWidth +
        "px;height:" +
        this._opt.wHeight +
        "px;margin-top:-" +
        this._opt.wHeight / 2 +
        "px;margin-left:-" +
        this._opt.wWidth / 2 +
        "px;background-color:" +
        this._opt.wBackgroundColor +
        ";opacity:" +
        this._opt.wOpacity +
        ";background-image:url(" +
        this._opt.wBackgroundImg +
        ");border-radius:" +
        this._opt.wRadius +
        "px'><div class='lanui-loading-body-VL'><span style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.loadingTop +"px;" +
        ";border-radius:" +
        this._opt.radius +"px;" +
        ";margin-left:-" +
        (this._opt.width/2+10) +"px'></span><span style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.loadingTop +"px;" +
        ";border-radius:" +
        this._opt.radius +"px;" +
        ";margin-left:-" +
        this._opt.width/2 +"px'></span><span style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;background-color:" +
        this._opt.backgroundColor +
        ";border-radius:" +
        this._opt.radius +"px;" +
        ";margin-top:-" +
        this._opt.loadingTop +"px;" +
        ";margin-left:" +
        (-this._opt.width/2+10) +"px'></span>" +
        "</div><div class='lanui-loading-text' style='color:" +
        this._opt.loadingColor +
        ";font-size:" +
        this._opt.loadingFontsize +
        "px;margin-top:" +
        this._opt.loadingTop +
        "px'>" +
        this._opt.loadingText +
        "</div></div>"; //设置加载状态
    } else {
        this._loading.innerHTML =
        "<div class='lanui-loading-back' style='background-color:" +
        this._opt.backBackgroundColor +
        ";opacity:" +
        this._opt.backOpacity +
        ";background-image:url(" +
        this._opt.backBackgroundImg +
        ")'></div>" +
        "<div class='lanui-loading-main' style='width:" +
        this._opt.wWidth +
        "px;height:" +
        this._opt.wHeight +
        "px;margin-top:-" +
        this._opt.wHeight / 2 +
        "px;margin-left:-" +
        this._opt.wWidth / 2 +
        "px;background-color:" +
        this._opt.wBackgroundColor +
        ";opacity:" +
        this._opt.wOpacity +
        ";background-image:url(" +
        this._opt.wBackgroundImg +
        ");border-radius:" +
        this._opt.wRadius +
        "px'><div class='lanui-loading-body'>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "<span class='Embed' style='width:" +
        this._opt.width +
        "px;height:" +
        this._opt.height +
        "px;margin-top:-" +
        this._opt.top +
        "px'><span style='background-color:" +
        this._opt.backgroundColor +
        ";margin-top:-" +
        this._opt.dispersed +
        "px'></span></span>" +
        "</div><div class='lanui-loading-text' style='color:" +
        this._opt.loadingColor +
        ";font-size:" +
        this._opt.loadingFontsize +
        "px;margin-top:" +
        this._opt.loadingTop +
        "px'>" +
        this._opt.loadingText +
        "</div></div>"; //设置加载状态
    }
    l.prototype.index = this._op.index;
    if (this._opt.name == "body") {
      document.body.appendChild(this._loading); //添加loading节点
    } else {
      console.log(this._opt.name);
      document.getElementsByName(this._opt.name)[0].style.position = "relative"; //设置元素相对属性
      document.getElementsByName(this._opt.name)[0].appendChild(this._loading); //添加loading节点
    }
  };
  //关闭
  l.prototype.close = function (option) {
    document.getElementsByClassName("lanui-loading-" + option)[0].remove();
  };
  e.loading = new r();
})(window);
